<script setup lang="ts">
  import { ref } from 'vue';

  const onClickItem = (item, index) => {
    // alert(index);
    console.log('onClickItem', item, index);
  };

  const list = ref([
    {
      items: [] as object[],
      refreshing: false,
      loading: false,
      error: false,
      finished: false,
      historyArray: ['A', 'B'],
    },
    {
      items: [] as object[],
      refreshing: false,
      loading: false,
      error: false,
      finished: false,
    },
    {
      items: [] as object[],
      refreshing: false,
      loading: false,
      error: false,
      finished: false,
    },
  ]);

  const onLoad = (index: number, val: string) => {
    console.log(`onLoad:${val}`);
    debugger;
    const currentList = list.value[index];
    currentList.loading = true;

    console.log('aaaaaaaaaaaaaaaaaaa');

    setTimeout(() => {
      // debugger;
      if (currentList.refreshing) {
        currentList.items = [];
        currentList.refreshing = false;
      }

      for (let i = 0; i < 10; i++) {
        const text = currentList.items.length + 1;
        // currentList.items.push(text < 10 ? '0' + text : String(text));
        currentList.items.push({
          title: `title_${i}`,
          thumb:
            'https://camo.githubusercontent.com/3f50c01f4ac4cce54ef4c19f0c961a1366ad573224bd6d986de120a3b496d92c/68747470733a2f2f63646e2e7175617361722e6465762f73706f6e736f72732f6d696f2d61622e737667',
          na1: '那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。',
          co1: text,
        });
      }

      currentList.loading = false;
      currentList.refreshing = false;

      // show error info in second demo
      if (
        index === 1 &&
        currentList.items.length === 10 &&
        !currentList.error
      ) {
        currentList.error = true;
      } else {
        currentList.error = false;
      }

      if (currentList.items.length >= 100) {
        currentList.finished = true;
      }

      console.log('bbbbbb', currentList);
    }, 1000);
  };

  const onRefresh = (index: number, val: string) => {
    console.log(`onRefresh:${val}`);
    list.value[index].finished = false;
    // list.value[index].loading = true;
    onLoad(index, val);
  };

  const onClear = (index: number) => {
    list.value[index].items = [];
  };

  const itemTemplateGeneral = [
    {
      type: 'title',
      valueType: 'field',
      field: 'title',
      expression: '',
      ellipsis: false,
      demo: '',
    },
    {
      type: 'thumb',
      valueType: 'expression',
      field: '',
      expression: '${thumb}',
      ellipsis: false,
      demo: '',
    },
    {
      type: 'info',
      valueType: 'field',
      field: 'na1',
      expression: '',
      ellipsis: true,
      demo: '',
    },
    {
      type: 'info',
      valueType: 'expression',
      field: '',
      expression: '${na1} -- ${co1}',
      ellipsis: false,
      demo: '',
    },
  ];
  const l = {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
  };
</script>

<template>
  <div>
    <!-- <t-popup-search
      :showSearchBar='true'
      :totalCount="333"
      :itemTemplateGeneral="itemTemplateGeneral"
      :loading="list[1].loading"
      :finished="list[1].finished"
      v-model:refreshing="list[1].refreshing"
      :finished-text="'finishedText'"
      @load="val => onLoad(1, val)"
      @refresh="val => onRefresh(1, val)"
      :rows="list[1].items"
      @clickItem="onClickItem"
    >
    </t-popup-search> -->
    <t-popup-search
      :totalCount="list[0].items.length"
      itemTemplate="custom"
      :loading="list[0].loading"
      :finished="list[0].finished"
      :error='list[0].error'
      v-model:refreshing="list[0].refreshing"
      :finished-text="'finishedText'"
      @load="val => onLoad(0, val)"
      @refresh="val => onRefresh(0, val)"
      :rows="list[0].items"
      @clickItem="onClickItem"
    >
      <template v-slot="row">
        <div>{{ row }}----</div>
      </template>
    </t-popup-search>
  </div>
</template>

<style lang="less"></style>
